<template>
  <div class="hello">
    <div class="container">
      <div class="info_box user_info">
        <div class="logo">
          <img src="../assets/icon.png" width="100px" alt="">
        </div>
        <div class="page_title">
          <img src="../assets/title.png" width="220px" alt="">
        </div>
        <div class="row user_name">
            <div class="col-12">
              <b>{{ user_data.name }}</b>{{ user_data.nation }}
              <hr>
            </div>
        </div>
        <div class="row user_Key_info">
            <div class="col-12 col-sm-4">
              <i class="iconfont icon-credentials_icon"></i><b>{{ user_data.tel }}</b>
            </div>
            <div class="col-12 col-sm-8">
              <i class="iconfont icon-zuobiao"></i><b>{{ user_data.id }}</b>
            </div>
            <div class="col-12 col-sm-12">
              <i class="iconfont icon-shouji"></i><b>{{ user_data.add }}</b>
            </div>
        </div>
      </div>
      <div class="info_box">
        <div class="more_info">
          <div class="row">
            <div class="col-12">
              <b>人编号：</b>{{ user_data.personal_number }}
            </div>
            <div class="col-12">
              <b>人数：</b>{{ user_data.total }}
            </div>
            <div class="col-12">
              <b>户编号：</b>{{ user_data.house_number }}
            </div>
            <div class="col-12">
              <b>与户主关系：</b>{{ user_data.relationship }}
            </div>
            <div class="col-12">
              <b>文化程度：</b>{{ user_data.degree_of_Education }}
            </div>
            <div class="col-12">
              <b>在校生状况：</b>{{ user_data.students_in_school }}
            </div>
            <div class="col-12">
              <b>健康状况：</b>{{ user_data.health }}
            </div>
            <div class="col-12">
              <b>劳动技能：</b>{{ user_data.skill }}
            </div>
            <div class="col-12">
              <b>务工状况：</b>{{ user_data.work_status }}
            </div>
            <div class="col-12">
              <b>务工时间（月）：</b>{{ user_data.working_hours }}
            </div>
            <div class="col-12">
              <b>参加大病医疗：</b>{{ user_data.medical_care }}
            </div>
            <div class="col-12">
              <b>脱贫属性：</b>{{ user_data.poverty_alleviation }}
            </div>
            <div class="col-12">
              <b>脱贫年度：</b>{{ user_data.poverty_free_year }}
            </div>
            <div class="col-12">
              <b>贫困户属性：</b>{{ user_data.poor_households }}
            </div>
            <div class="col-12">
              <b>致贫原因：</b>{{ user_data.causes_poverty }}
            </div>
            <div class="col-12">
              <b>危房户：</b>{{ user_data.dangerous_house }}
            </div>
            <div class="col-12">
              <b>是否解决安全饮用水：</b>{{ user_data.drinking_water }}
            </div>
            <div class="col-12">
              <b>人均纯收入：</b>{{ user_data.income }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CryptoJS from "crypto-js";
export default {
  name: 'userInfo',
  data () {
    return {
      user_data: [],
      user_id:''
    }
  },
  mounted(){
    this.canshu()
    this.getData()
  },
  methods:{
    canshu(){
      let str = location.href;
      let index = str .lastIndexOf("\/",str.length-5);
      this.user_id = str.substring(index+1,str.length);
      //console.log(this.user_id);
    },
    getData(){
      this.$axios.get('http://pa.xmartjoy.com/api/people/get/',{params: {user_id: this.user_id}})
      .then(response=>{
          let sectoral_data = response.data.data
          this.user_data = sectoral_data
          console.log(response)
      })
      .catch(error=>{
          console.log(error);
          alert('网络错误，不能访问');
      })
    }
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.info_box{
  position: relative;
  margin: 10px 0;
  border-radius: 10px;
  background-color: #fff;
}
.logo{
  position: absolute;
  top: -10px;
  left: 0px;
  width: 100px;
}
.user_info{
  padding: 20px 0;
  background: url(../assets/bg.jpg);
  background-size: 200%;
  background-position: center;
}
.page_title{
  color: #a01013;
  padding-left: 100px;
  text-align: left;
}
.user_name{
  margin-top: 40px;
}
.user_name b{
  color: #a01013;
  font-size: 30px;
  margin-right: 10px;
}
.user_Key_info{
  padding-left: 20px;
  line-height: 40px;
  text-align: left;
}
.user_Key_info i{
  display:inline-block;
  width: 20px;
  color: #a01013;
}
.user_Key_info b{
  margin: 0 10px;
}
.more_info{
  padding: 10px 20px;
  text-align: left;
  line-height: 40px;
}
</style>
